<template>
    <view class="l-badge" mut-bind:tap="handleTap">
        <slot />
        <block v-if="show">
            <view v-if="dot" class="l-badge-dot l-class l-class-self l-self-class"></view>
            <view v-else :class="'l-badge-content-' + shape + ' l-badge-content l-class l-class-self l-self-class'">{{ finalCountFunFun }}</view>
        </block>
    </view>
</template>

<script>
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            finalCount: 0,
            finalCountFun: '',
            finalCountFunFun: ''
        };
    },

    externalClasses: ['l-class', 'l-class-self', 'l-self-class'],
    mixins: [validator],

    props: {
        dot: {
            type: Boolean,
            default: false
        },
        shape: {
            type: String,
            default: 'horn',
            options: ['horn', 'circle']
        },
        value: {
            type: String,
            default: '0'
        },
        mode: {
            type: String,
            default: 'number',
            options: ['number', 'text']
        },
        maxCount: {
            type: Number,
            default: 99
        },
        numberType: {
            type: String,
            default: 'overflow',
            options: ['overflow', 'limit', 'ellipsis']
        },
        show: {
            type: Boolean,
            default: true
        }
    },

    watch: {
        value: function () {
            this.finalCount();
        }
    },

    methods: {
        finalCount() {
            if (isNaN(Number(this.value)) || 'text' === this.mode) {
                this.setData({
                    finalCount: this.value
                });
            } else {
                this.switchType();
            }
        },
        switchType() {
            switch (this.numberType) {
                case 'overflow':
                    this.setData({
                        finalCount: Number(this.value) > Number(this.maxCount) ? this.maxCount + '+' : this.value
                    });
                    break;
                case 'ellipsis':
                    this.setData({
                        finalCount: Number(this.value) > Number(this.maxCount) ? '...' : this.value
                    });
                    break;
                case 'limit':
                    this.setData({
                        finalCount:
                            Number(this.value) > 999
                                ? Number(this.value) >= 9999
                                    ? Math.floor((this.value / 10000) * 100) / 100 + 'w'
                                    : Math.floor((this.value / 1000) * 100) / 100 + 'k'
                                : this.value
                    });
                    break;
                default:
                    this.setData({
                        finalCount: Number(this.value)
                    });
            }
        },
        handleTap() {
            this.$emit(
                'lintap',
                {
                    detail: {}
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },

    created: function () {}
};
</script>
<style>
.l-badge {
    position: relative;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
}
.l-badge-content {
    max-width: 650rpx;
    left: 70%;
    background-color: #ff474b;
    color: #fff;
    position: absolute;
    font-size: 20rpx;
    display: inline-block;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    z-index: 10;
    letter-spacing: 0.5rpx;
}
.l-badge-content-horn {
    height: 28rpx;
    min-width: 54rpx;
    padding: 0 8rpx;
    border-radius: 14rpx 14rpx 14rpx 0rpx;
    line-height: 28rpx;
    top: -10rpx;
}
.l-badge-content-circle {
    height: 32rpx;
    min-width: 32rpx;
    padding: 0 10rpx;
    border-radius: 16rpx;
    line-height: 32rpx;
    top: -10rpx;
}
.l-badge-dot {
    height: 16rpx;
    width: 16rpx;
    transform: translateX(50%);
    border-radius: 50%;
    background-color: #ff474b;
    position: absolute;
    top: -4rpx;
    right: 0rpx;
}
</style>
